<template>
  <div :class="['wrap', resumesStatus.resumesStatus != 0 ? 'noBg' : '']">
    <van-overlay :show="props.showDialog" z-index="1000">
      <div class="wrapper">
        <div class="block">
          <img src="../assets/ui/img/overlayBg.png" alt="" />
          <div class="close" @click="togeolShow">
            <van-icon name="cross" />
          </div>
          <div class="content">
            <h3>亲爱的{{ userInfo.userName }}同学：</h3>
            你好！
            <br />
            <!-- <span>我们很开心通知您通过了方田教育的培训考核，正式进入三方签约环节，为了明确您的签约意向，我们向您发送此确认书。请认真阅读后确认是否签署。</span> -->
            <span v-if="educationType == 0">我们很开心通知您通过了方田教育的培训考核，正式进入三方签约环节，为了明确您的签约意向，我们向您发送此确认书。请认真阅读后确认是否签署。</span>
            <span v-if="educationType == 1">我们很开心通知您通过了方田教育的培训考核，为了明确您的签约意向，我们向您发送此确认书。请认真阅读后确认是否签署。</span>
            <br />
            <br />
            <div style="text-align: right;position: relative;right: 8px;">
              —方田教育{{ clickStatus.currentDay.split(" ")[0] }}
            </div>
          </div>
          <div class="bottomContent">
            如果您在<span v-if="educationType == 0">三个工作日</span><span
              v-if="educationType == 1">七个工作日</span>之内未给出明确答复，则视为放弃此份offer，公司将不再为您保留此岗位。
          </div>
          <div class="btn_content">
            <div class="btn" @click="toAgreement">{{ educationType == 0 ? "查看应约协议" : "确认" }}</div>
          </div>

        </div>
      </div>
    </van-overlay>

    <div v-if="resumesStatus.resumesStatus == 0">
      <!-- 弹框不弹出的时候，才显示流程图否则都显示 -->
      <div v-if="resumesStatus.issuedStatus == 0">
        <div class="desc">流程进度（{{ steps != 0 ? steps + 1 : 0 }}/6）</div>
        <div class="stepContent">
          <!-- 步骤条 要注意的是active初始值为1 -->
          <van-steps direction="vertical" :active="steps">
            <van-step v-for="(item, index) in list">
              <template #active-icon>
                <img src="../assets/ui/img/scheduleLoading.png" />
              </template>
              <template #inactive-icon>
                <img src="../assets/ui/img/scheduleNone.png" />
              </template>
              <template #finish-icon>
                <img src="../assets/ui/img/scheduleFinsh.png" />
              </template>
              <h3>{{ item.key }}</h3>
              <div class="steplist">
                <!-- 子集步骤条 要注意的是子集的active要根据当前的steps进行判定小于他的，证明所有子集都已通过 -->
                <van-steps direction="vertical"
                  :active="steps == 6 ? item.children?.length : index == steps ? stepslist - 1 : index < steps ? item.children?.length : -1">
                  <van-step v-for="items in item.children">
                    <template #active-icon>
                      <img src="../assets/ui/img/scheduleLoading.png" />
                    </template>
                    <template #inactive-icon>
                      <img src="../assets/ui/img/scheduleNoneList.png" />
                    </template>
                    <template #finish-icon>
                      <img src="../assets/ui/img/scheduleFinsh.png" />
                    </template>
                    <h4>{{ items.key }}</h4>
                  </van-step>
                </van-steps>
              </div>
            </van-step>
          </van-steps>
        </div>
      </div>
      <!-- 弹框弹出得时候，判定应届生弹出,往届生不弹出 -->
      <div v-if="resumesStatus.issuedStatus == 1 && resumesStatus.educationType == 0">
        <div class="desc">流程进度（{{ steps != 0 ? steps + 1 : 0 }}/6）</div>
        <div class="stepContent">
          <!-- 步骤条 要注意的是active初始值为1 -->
          <van-steps direction="vertical" :active="steps">
            <van-step v-for="(item, index) in list">
              <template #active-icon>
                <img src="../assets/ui/img/scheduleLoading.png" />
              </template>
              <template #inactive-icon>
                <img src="../assets/ui/img/scheduleNone.png" />
              </template>
              <template #finish-icon>
                <img src="../assets/ui/img/scheduleFinsh.png" />
              </template>
              <h3>{{ item.key }}</h3>
              <div class="steplist">
                <!-- 子集步骤条 要注意的是子集的active要根据当前的steps进行判定小于他的，证明所有子集都已通过 -->
                <van-steps direction="vertical"
                  :active="steps == 6 ? item.children?.length : index == steps ? stepslist - 1 : index < steps ? item.children?.length : -1">
                  <van-step v-for="items in item.children">
                    <template #active-icon>
                      <img src="../assets/ui/img/scheduleLoading.png" />
                    </template>
                    <template #inactive-icon>
                      <img src="../assets/ui/img/scheduleNoneList.png" />
                    </template>
                    <template #finish-icon>
                      <img src="../assets/ui/img/scheduleFinsh.png" />
                    </template>
                    <h4>{{ items.key }}</h4>
                  </van-step>
                </van-steps>
              </div>
            </van-step>
          </van-steps>
        </div>
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup>
import { computed, ref, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { localUserinfo } from '../assets/js/common';
const userInfo = localUserinfo();
//弹出提示去签协议
const show = ref<boolean>(false);
const props = defineProps(['showDialog']);
const emit = defineEmits(['closePop']);

import apis from '../api/index';
const router = useRouter();
const steps = ref<number>();
const stepslist = ref<number>();

const stepsIndex = ref<String>('3_2'); //后端传数据给前端
//const [step, listIndex] = stepsIndex.value.split('_');

const educationType = ref();
const clickStatus = JSON.parse(localStorage.getItem('clickStatus'));
const { userResumesList, userResumesProcess } = apis;
const resumesStatus = ref({});
const getResume = async () => {
  // const list = await userResumesList({
  //   userId: userInfo.userId
  // });
  if (clickStatus.resumesId != null) {
    const process = await userResumesProcess({
      resumesId: clickStatus.resumesId
    });
    resumesStatus.value = process.data;
    educationType.value = process.data.educationType;
    stepsIndex.value = process.data.process;

    // const strings = '6-0'
    // stepsIndex.value = strings;
    // steps.value = Number(strings.split('-')[0] - 1);
    // stepslist.value = Number(strings.split('-')[1]);

    steps.value = Number(process.data.process.split('-')[0] - 1);
    stepslist.value = Number(process.data.process.split('-')[1]);
  } else {
    // const strings = '4-2'
    // stepsIndex.value = strings;
    // steps.value = Number(strings.split('-')[0] - 1);
    // stepslist.value = Number(strings.split('-')[1]);

    steps.value = 0;
    resumesStatus.value.resumesStatus = 0;
    resumesStatus.value.issuedStatus = 0;
  }

}
// 定义接收的属性
// const props = defineProps({
//   stepData: {
//     type: Object,
//     required: true
//   },
//   showDialog: {
//     type: Boolean,
//     default: false
//   }
// });

// 计算属性来处理 stepData
// const processedName = computed(() => {
//   return props.stepData;
// });
getResume();
interface FlowItem {
  key: string;
  children?: FlowItem[];
}
const list = ref<FlowItem[]>([
  {
    key: '投递简历',
  },
  {
    key: '简历筛选',
  },
  {
    key: '面试环节',
    children: [
      {
        key: '约面',
      },
      {
        key: '面试',
      },
    ],
  },
  {
    key: '培训环节',
    children: [
      {
        key: '约培',
      },
      {
        key: '到培',
      },
      {
        key: '培训中',
      },
      {
        key: '考核',
      },
    ],
  },
  {
    key: '发送Offer',
  },
  {
    key: '签约',
  },
]);

const togeolShow = () => {
  emit('closePop');
}
const toAgreement = () => {
  //判定应届生还是往届生
  if (educationType.value == 0) {
    router.push('/contract');
  } else {
    //show.value = false;
    emit('closePop');
  }
};

</script>
<style lang="less" scoped>
.noBg {
  background: none !important;
}

.wrap {
  width: 100%;
  background: #fff;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 999;

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    text-align: center;
    position: relative;
    color: #ffffff;

    img {
      width: 90%;
    }

    .close {
      font-size: 26px;
      position: absolute;
      top: 30px;
      right: 50px;
      z-index: 9999;
    }

    .content {
      text-align: left;
      width: 268px;
      position: absolute;
      top: 40%;
      left: 52%;
      line-height: 30px;
      font-size: 16px;
      /* padding: 0 10px; */
      transform: translate(-50%, -50%);

      h3 {
        margin-bottom: 10px;
        font-weight: 500;
      }
    }

    .bottomContent {
      font-size: 16px;
      position: absolute;
      width: 268px;
      color: #000000;
      line-height: 28px;
      bottom: 65px;
      left: 57px;
      text-align: left;
      bottom: 3%;
      left: 52%;
      line-height: 30px;
      font-size: 16px;
      /* padding: 0 10px; */
      transform: translate(-50%, -50%);

      span {
        color: #ff4242;
      }
    }

    .btn_content {
      font-size: 16px;
      bottom: 20px;
      color: #209ee4;
      font-weight: 600;
      position: absolute;
      width: 100%;
    }
  }

  .desc {
    flex: 0.8;
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 20px;
  }

  .stepContent {
    h3 {
      font-weight: 550;
      margin-left: 10px;
    }

    :deep(.van-icon) {
      font-size: 18px;
      background: #ffffff;
    }

    :deep(.van-step--finish .van-step__line) {
      background: #1695db;
    }

    :deep(.van-step__title--active) {
      color: #000000;
    }

    :deep(.van-step--vertical:not(:last-child):after) {
      border: none;
    }

    :deep(.van-step__line) {
      background: #b1babf;
    }

    img {
      width: 20px;
    }

    .steplist {
      margin-top: 10px;

      :deep(.van-steps) {
        background: #f5f9fb;
      }

      :deep(.van-icon) {
        font-size: 18px;
        background: #f5f9fb;
      }
    }
  }
}
</style>
